<template>
    <section>
        <div class="users-container">
            <div class="users-con">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">

                    <form-row :label="`id`">
                        <el-form-item slot="item" class="form-row__item">
                            <span>{{usersList.id}}</span>
                        </el-form-item>
                    </form-row>
                    <form-row :label="`昵称`">
                        <el-form-item slot="item" class="form-row__item">
                            <span>{{usersList.nickname}}</span>
                        </el-form-item>
                    </form-row>
                    <form-row :label="`头像`">
                        <el-form-item slot="item" class="form-row__item">
                            <img :src="usersList.img" class="user-img">
                        </el-form-item>
                    </form-row>
                    <form-row :label="`城市`">
                        <el-form-item slot="item" class="form-row__item">
                            <span>{{usersList.city}}</span>
                        </el-form-item>
                    </form-row>
                    <form-row :label="`上级信息`">
                        <el-form-item slot="item" class="form-row__item">
                            <span>{{usersList.parent_id}}</span>
                        </el-form-item>
                    </form-row>
                    <form-row :label="`下级信息`">
                        <el-form-item slot="item" class="form-row__item">
                            <!--<span>{{usersList.nickname}}</span>-->
                        </el-form-item>
                    </form-row>
                    <form-row :label="`优惠券`">
                        <el-form-item slot="item" class="form-row__item">
                            <el-button type="primary">添加优惠券</el-button>
                        </el-form-item>
                    </form-row>
                    <form-row :label="`地址信息`">
                        <el-form-item slot="item" class="form-row__item">

                        </el-form-item>
                    </form-row>
                    <form-row :label="`角色`">
                        <el-form-item slot="item" class="form-row__item">
                            <el-button type="primary">修改角色</el-button>
                        </el-form-item>
                    </form-row>
                    <form-row :label="`创建时间`">
                        <el-form-item slot="item" class="form-row__item">
                            <span>{{usersList.created_at}}</span>
                        </el-form-item>
                    </form-row>
                    <form-row :label="`更新时间`">
                        <el-form-item slot="item" class="form-row__item">
                            <span>{{usersList.updated_at}}</span>
                        </el-form-item>
                    </form-row>

                    <form-row style="border-bottom:none;">
                        <el-form-item slot="last-item" class="form-row__item_last">
                            <el-button @click="back">返回</el-button>
                        </el-form-item>
                    </form-row>

                </el-form>
            </div>
        </div>
        <!--<el-dialog-->
                <!--title="优惠券列表"-->
                <!--:visible.sync="dialogVisible"-->
                <!--width="30%">-->
            <!--<el-checkbox-group v-model="usersList.bonuses" @change="handleCheckedCitiesChange">-->
                <!--<el-checkbox v-for="bonuses in bonusesList" :label="bonuses.name" :key="bonuses.id">{{bonuses.name}}</el-checkbox>-->
            <!--</el-checkbox-group>-->
            <!--<span slot="footer" class="dialog-footer">-->
                <!--<el-button @click="cancel">取 消</el-button>-->
                <!--<el-button type="primary" @click="submit">确 定</el-button>-->
            <!--</span>-->
        <!--</el-dialog>-->
        <el-dialog
                title="角色列表"
                :visible.sync="dialogVisible"
                width="30%">
            <el-checkbox-group v-model="usersList.bonuses" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="bonuses in bonusesList" :label="bonuses.name" :key="bonuses.id">{{bonuses.name}}</el-checkbox>
            </el-checkbox-group>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
    import FormRow from '../../components/basic/FlowRow.vue';

    export default {
        components: {
            FormRow
        },
        data() {
            return {
                id: '',
                usersList: '',
                bonusesList:'',
                rolesList:'',
                dialogVisible: false
            }
        },
        created() {
            this.id = this.$router.id;
            this.getUsersData(parseInt(this.$router.id))
            this.getBonusesList();
            this.getRolesList();
        },
        mounted: {},
        methods: {
            back() {
                this.$router.go(-1);
            },
            getBonusesList(){
                axios
                    .get(`admin_bonus_categories/${id}`)
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.bonusesList = res;
                    })
            },
            getRolesList(){
                console.log('目前没有接口')
                // axios
                //     .get(``)
                //     .then(res => res.data.data)
                //     .then(res => {
                //         console.log('数据', res)
                //         this.rolesList = res;
                //     })
            },
            getUsersData(id) {
                axios
                    .get(`admin_users/${id}`)
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.usersList = res;
                    })
            },
            submit() {
                this.$confirm('确认添加优惠券？')
                    .then(() => this.postData())
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    })
                    .catch(err => {
                        this.$message({
                            type: 'err',
                            message: '添加失败!'
                        });
                    });
            },
            cancel() {
                this.dialogVisible = false;
            },
            genData(data) {
                return {
                    bonuses:data.bonuses,
                    role:data.role,
                    _method: 'PUT'
                }
            },
            postData() {
                axios
                    .post(`admin_users/${this.id}`, this.genData(this.usersList))
                    .then(res => {
                        return res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg);
                    });
            }
        }
    }
</script>

<style scoped>
    .users-container {
        margin: 25px;
        border-radius: 4px;
        background: #fff;
        min-height: calc(100vh - 92px);
    }

    .user-img {
        width: 60px;
        height: 60px;
    }

    .users-con {
        padding: 5px 20px 20px 20px;
    }
</style>